
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>IconFont</title>
    <link rel="stylesheet" href="demo.css">
    <link rel="stylesheet" href="iconfont.css">
</head>
<body>
    <div class="main markdown">
        <h1>IconFont 图标</h1>
        <ul class="icon_lists clear">
            
                <li>
                <i class="icon iconfont icon-shouye"></i>
                    <div class="name">保障</div>
                    <div class="fontclass">.icon-shouye</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shouye1"></i>
                    <div class="name">首页</div>
                    <div class="fontclass">.icon-shouye1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shouye2"></i>
                    <div class="name">家人</div>
                    <div class="fontclass">.icon-shouye2</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shouye3"></i>
                    <div class="name">完成</div>
                    <div class="fontclass">.icon-shouye3</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shouye4"></i>
                    <div class="name">我的</div>
                    <div class="fontclass">.icon-shouye4</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shouye5"></i>
                    <div class="name">药丸</div>
                    <div class="fontclass">.icon-shouye5</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shouye6"></i>
                    <div class="name">问诊</div>
                    <div class="fontclass">.icon-shouye6</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shouye7"></i>
                    <div class="name">商城</div>
                    <div class="fontclass">.icon-shouye7</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shouye8"></i>
                    <div class="name">定位</div>
                    <div class="fontclass">.icon-shouye8</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shouye9"></i>
                    <div class="name">商店</div>
                    <div class="fontclass">.icon-shouye9</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shouye10"></i>
                    <div class="name">购物车</div>
                    <div class="fontclass">.icon-shouye10</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shouye11"></i>
                    <div class="name">设置</div>
                    <div class="fontclass">.icon-shouye11</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shouye12"></i>
                    <div class="name">美容</div>
                    <div class="fontclass">.icon-shouye12</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shouye13"></i>
                    <div class="name">医生</div>
                    <div class="fontclass">.icon-shouye13</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shouye14"></i>
                    <div class="name">询问</div>
                    <div class="fontclass">.icon-shouye14</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shouye15"></i>
                    <div class="name">扫码</div>
                    <div class="fontclass">.icon-shouye15</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shouye16"></i>
                    <div class="name">历史记录</div>
                    <div class="fontclass">.icon-shouye16</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shouye17"></i>
                    <div class="name">电话</div>
                    <div class="fontclass">.icon-shouye17</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shouye18"></i>
                    <div class="name">相机</div>
                    <div class="fontclass">.icon-shouye18</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shouye19"></i>
                    <div class="name">鲜花</div>
                    <div class="fontclass">.icon-shouye19</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shouye20"></i>
                    <div class="name">订单</div>
                    <div class="fontclass">.icon-shouye20</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shouye21"></i>
                    <div class="name">卡包</div>
                    <div class="fontclass">.icon-shouye21</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shouye22"></i>
                    <div class="name">血压</div>
                    <div class="fontclass">.icon-shouye22</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shouye23"></i>
                    <div class="name">提醒</div>
                    <div class="fontclass">.icon-shouye23</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shouye24"></i>
                    <div class="name">运动</div>
                    <div class="fontclass">.icon-shouye24</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shouye25"></i>
                    <div class="name">优惠卡</div>
                    <div class="fontclass">.icon-shouye25</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shouye26"></i>
                    <div class="name">钻石</div>
                    <div class="fontclass">.icon-shouye26</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shouye27"></i>
                    <div class="name">药箱</div>
                    <div class="fontclass">.icon-shouye27</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shouye28"></i>
                    <div class="name">病历</div>
                    <div class="fontclass">.icon-shouye28</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shouye29"></i>
                    <div class="name">诊断记录</div>
                    <div class="fontclass">.icon-shouye29</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shouye30"></i>
                    <div class="name">消息</div>
                    <div class="fontclass">.icon-shouye30</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shouye31"></i>
                    <div class="name">联系人</div>
                    <div class="fontclass">.icon-shouye31</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shouye32"></i>
                    <div class="name">药瓶</div>
                    <div class="fontclass">.icon-shouye32</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shouye33"></i>
                    <div class="name">活动</div>
                    <div class="fontclass">.icon-shouye33</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shouye34"></i>
                    <div class="name">天气</div>
                    <div class="fontclass">.icon-shouye34</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shouye35"></i>
                    <div class="name">血糖</div>
                    <div class="fontclass">.icon-shouye35</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shouye36"></i>
                    <div class="name">咨询</div>
                    <div class="fontclass">.icon-shouye36</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shouye37"></i>
                    <div class="name">疫苗</div>
                    <div class="fontclass">.icon-shouye37</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shouye38"></i>
                    <div class="name">中医药</div>
                    <div class="fontclass">.icon-shouye38</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shouye39"></i>
                    <div class="name">幼儿</div>
                    <div class="fontclass">.icon-shouye39</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shouye40"></i>
                    <div class="name">地址</div>
                    <div class="fontclass">.icon-shouye40</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shouye41"></i>
                    <div class="name">视频问诊</div>
                    <div class="fontclass">.icon-shouye41</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shouye42"></i>
                    <div class="name">进行中</div>
                    <div class="fontclass">.icon-shouye42</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shouye43"></i>
                    <div class="name">个性化</div>
                    <div class="fontclass">.icon-shouye43</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shouye44"></i>
                    <div class="name">已就诊</div>
                    <div class="fontclass">.icon-shouye44</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shouye45"></i>
                    <div class="name">待就诊</div>
                    <div class="fontclass">.icon-shouye45</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shouye46"></i>
                    <div class="name">付款</div>
                    <div class="fontclass">.icon-shouye46</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shouye47"></i>
                    <div class="name">服务中</div>
                    <div class="fontclass">.icon-shouye47</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shouye48"></i>
                    <div class="name">已取消</div>
                    <div class="fontclass">.icon-shouye48</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icon"></i>
                    <div class="name">刷新</div>
                    <div class="fontclass">.icon-icon</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icon1"></i>
                    <div class="name">浏览</div>
                    <div class="fontclass">.icon-icon1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icon2"></i>
                    <div class="name">赞</div>
                    <div class="fontclass">.icon-icon2</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icon3"></i>
                    <div class="name">分类</div>
                    <div class="fontclass">.icon-icon3</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icon4"></i>
                    <div class="name">说明</div>
                    <div class="fontclass">.icon-icon4</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icon5"></i>
                    <div class="name">步数</div>
                    <div class="fontclass">.icon-icon5</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icon6"></i>
                    <div class="name">积分</div>
                    <div class="fontclass">.icon-icon6</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icon7"></i>
                    <div class="name">叶子</div>
                    <div class="fontclass">.icon-icon7</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icon8"></i>
                    <div class="name">元宝</div>
                    <div class="fontclass">.icon-icon8</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icon9"></i>
                    <div class="name">汽车</div>
                    <div class="fontclass">.icon-icon9</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icon10"></i>
                    <div class="name">日历</div>
                    <div class="fontclass">.icon-icon10</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icon11"></i>
                    <div class="name">全科</div>
                    <div class="fontclass">.icon-icon11</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icon12"></i>
                    <div class="name">外科</div>
                    <div class="fontclass">.icon-icon12</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icon13"></i>
                    <div class="name">内科</div>
                    <div class="fontclass">.icon-icon13</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icon14"></i>
                    <div class="name">骨科</div>
                    <div class="fontclass">.icon-icon14</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icon15"></i>
                    <div class="name">口腔科</div>
                    <div class="fontclass">.icon-icon15</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icon16"></i>
                    <div class="name">奖杯</div>
                    <div class="fontclass">.icon-icon16</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icon17"></i>
                    <div class="name">完成</div>
                    <div class="fontclass">.icon-icon17</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icon18"></i>
                    <div class="name">生活</div>
                    <div class="fontclass">.icon-icon18</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icon19"></i>
                    <div class="name">特色</div>
                    <div class="fontclass">.icon-icon19</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icon20"></i>
                    <div class="name">饮食</div>
                    <div class="fontclass">.icon-icon20</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-2"></i>
                    <div class="name">摄像头反转</div>
                    <div class="fontclass">.icon-2</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icon21"></i>
                    <div class="name">耳鼻喉科</div>
                    <div class="fontclass">.icon-icon21</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icon22"></i>
                    <div class="name">精神科</div>
                    <div class="fontclass">.icon-icon22</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icon23"></i>
                    <div class="name">皮肤科</div>
                    <div class="fontclass">.icon-icon23</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icon24"></i>
                    <div class="name">退款</div>
                    <div class="fontclass">.icon-icon24</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icon25"></i>
                    <div class="name">女</div>
                    <div class="fontclass">.icon-icon25</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icon26"></i>
                    <div class="name">男</div>
                    <div class="fontclass">.icon-icon26</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icon27"></i>
                    <div class="name">热度</div>
                    <div class="fontclass">.icon-icon27</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icon28"></i>
                    <div class="name">拔罐</div>
                    <div class="fontclass">.icon-icon28</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icon29"></i>
                    <div class="name">血脂</div>
                    <div class="fontclass">.icon-icon29</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icon30"></i>
                    <div class="name">睡眠</div>
                    <div class="fontclass">.icon-icon30</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icon31"></i>
                    <div class="name">文本</div>
                    <div class="fontclass">.icon-icon31</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icon32"></i>
                    <div class="name">图片</div>
                    <div class="fontclass">.icon-icon32</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icon33"></i>
                    <div class="name">体重</div>
                    <div class="fontclass">.icon-icon33</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icon34"></i>
                    <div class="name">蓝牙</div>
                    <div class="fontclass">.icon-icon34</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icon35"></i>
                    <div class="name">输入</div>
                    <div class="fontclass">.icon-icon35</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icon36"></i>
                    <div class="name">编辑</div>
                    <div class="fontclass">.icon-icon36</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icon37"></i>
                    <div class="name">设备</div>
                    <div class="fontclass">.icon-icon37</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icon38"></i>
                    <div class="name">化学</div>
                    <div class="fontclass">.icon-icon38</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icon39"></i>
                    <div class="name">删除</div>
                    <div class="fontclass">.icon-icon39</div>
                </li>
            
        </ul>

        <h2 id="font-class-">font-class引用</h2>
        <hr>

        <p>font-class是unicode使用方式的一种变种，主要是解决unicode书写不直观，语意不明确的问题。</p>
        <p>与unicode使用方式相比，具有如下特点：</p>
        <ul>
        <li>兼容性良好，支持ie8+，及所有现代浏览器。</li>
        <li>相比于unicode语意明确，书写更直观。可以很容易分辨这个icon是什么。</li>
        <li>因为使用class来定义图标，所以当要替换图标时，只需要修改class里面的unicode引用。</li>
        <li>不过因为本质上还是使用的字体，所以多色图标还是不支持的。</li>
        </ul>
        <p>使用步骤如下：</p>
        <h3 id="-fontclass-">第一步：引入项目下面生成的fontclass代码：</h3>


        <pre><code class="lang-js hljs javascript"><span class="hljs-comment">&lt;link rel="stylesheet" type="text/css" href="./iconfont.css"&gt;</span></code></pre>
        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
        <pre><code class="lang-css hljs">&lt;<span class="hljs-selector-tag">i</span> <span class="hljs-selector-tag">class</span>="<span class="hljs-selector-tag">iconfont</span> <span class="hljs-selector-tag">icon-xxx</span>"&gt;&lt;/<span class="hljs-selector-tag">i</span>&gt;</code></pre>
        <blockquote>
        <p>"iconfont"是你项目下的font-family。可以通过编辑项目查看，默认是"iconfont"。</p>
        </blockquote>
    </div>
</body>
</html>
